import React,{useState,useEffect} from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { Input, Button, Table, Radio, Switch, message, Modal, Select } from 'antd'
import { getDoctorList, getOfOrg, getOfTeam,getDoctorTarget, getDoctorRole, deleteDoctor,patchDoctor,getyears,getSelectDoctor } from '../../../../api/Datas'
import MyForm from '../../../../component/Datas/MyForm';
import './DataPerDoctor.scss'
interface Props{

}
const { Search } = Input;
const { confirm } = Modal;
function DataPerDoctor(props:Props) {
    var [option, setOption] = useState([])
    var [list,setList]=useState([])
    var [ofteam, setOfteam] = useState([])
    var [year, setYear] = useState([])
    var [doctor, setDoctor] = useState([])
    var [loading, setLoading] = useState(false)
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 100 })
     // 挂载阶段
     useEffect(() => {
        getList()
        getorglist()
        getteamlist()
        getYear()
        getDocotr()
        setPagination({
            ...pagination, total: list.length
        })
    }, [])
     // 获取所属机构列表
     var getorglist = async () => {
        var res = await getOfOrg()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setOption(arr)
    }
    // 获取所属团队列表
    var getteamlist = async () => {
        var res = await getOfTeam()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setOfteam(arr)
    }
    // 获取年份列表
    var getYear = async()=>{
        var res = await getyears()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setYear(arr)
    }
    // 获取医生列表
    var getDocotr = async()=>{
        var res = await getSelectDoctor()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setDoctor(arr)
    }
    // 获取医生目标列表
    var getList = async()=>{
        var res = await getDoctorTarget()
        setList(res.data)
    }
    // 表格
    const columns = [
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            render: (_: any, record: any) => { //动态渲染当前列的数据，和dataIndex有冲突
                return (
                    <>
                        <a>编辑</a>
                    </>
                )
            }
        },
        {
            title: '医生编号', //表格头的标题
            dataIndex: 'id', //数据索引，决定通过哪个属性名（字段名）获取数据
            key: 'id',
        },
        {
            title: '医生姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '全年目标',
            dataIndex: 'target',
            key: 'target',
        },
        {
            title: '第一季度',
            dataIndex: 'spring',
            key: 'spring',
            render: (_: any, record: any) => <p>{record.target/4}</p>
        },
        {
            title: '1月',
            dataIndex: 'one',
            key: 'one',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '2月',
            dataIndex: 'two',
            key: 'two',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '3月',
            dataIndex: 'three',
            key: 'three',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '第二季度',
            dataIndex: 'summer',
            key: 'summer',
            render: (_: any, record: any) => <p>{record.target/4}</p>
        },
        {
            title: '4月',
            dataIndex: 'four',
            key: 'four',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '5月',
            dataIndex: 'five',
            key: 'five',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '6月',
            dataIndex: 'six',
            key: 'six',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '第三季度',
            dataIndex: 'autumn',
            key: 'autumn',
            render: (_: any, record: any) => <p>{record.target/4}</p>
        },
        {
            title: '7月',
            dataIndex: 'seven',
            key: 'seven',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '8月',
            dataIndex: 'eight',
            key: 'eight',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '9月',
            dataIndex: 'nine',
            key: 'nine',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '第四季度',
            dataIndex: 'winter',
            key: 'winter',
            render: (_: any, record: any) => <p>{record.target/4}</p>
        },
        {
            title: '10月',
            dataIndex: 'ten',
            key: 'ten',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '11月',
            dataIndex: 'eleven',
            key: 'eleven',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        },
        {
            title: '12月',
            dataIndex: 'twelve',
            key: 'twelve',
            render: (_: any, record: any) => <p>{record.target/12}</p>
        }
    ]
    var onSearch = async(value:any)=>{
        var res = await getDoctorTarget({name_like:value})
        setList(res.data)
    }
    return (
        <div className='dataperdoctor'>
           {/* 顶部第一层 */}
           <div className="top">
            </div>
            <Search placeholder="请输入医生姓名关键字"
                onSearch={onSearch}
                style={{ width: 300 }}
                allowClear
            />
            <MyForm list={list} columns={columns}/>
        </div>
    );
}

export default DataPerDoctor;